<template>
	<view>
		<!-- 全屏加载 -->
		<cover-bulr-bg v-if="coverBulr"></cover-bulr-bg>

		<!-- 密码访问 -->
		<block v-if="protected">
			<common-pass @passTap="emitPass" :isError="isError" :getPass="getPass" :public_name="wxSet.public_name"
				:public_key="detailData.public_key" :public_step="public_step"></common-pass>
		</block>

		<view class="centem-body" v-else>
			<!-- 顶部壁纸展示 -->
			<view class="wallpaper-preview-container">
				<!-- 标题 -->
				<view class="down-view-all content-card list-li-left-h" style="margin-top: 30rpx;">
					<view class="down-view-title">
						<view class="down-view-ruan">◉</view>{{ detailData.fr_down_title }}
					</view>
					<view class="down-view-title-dscr">
						{{ detailData.title.rendered }}
					</view>
				</view>

				<!-- 图预览 -->
				<view class="wallpaper-showcase" v-if="imgUrls != ''">
					<swiper class="wallpaper-preview-img" :indicator-dots="true" :autoplay="true" :interval="3000"
						:duration="1000">
						<swiper-item v-for="(item, index) in imgUrls" :key="index" @click="imgsTap(index)">
							<image class="fengrui-img" :src="item" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="down-list-btn-text" style="margin-left: 38rpx;" v-if="imgUrls != ''">
					<span class="que-user-red">*</span>
					点击可放大
				</view>
			</view>

			<!-- 订阅消息-->
			<block v-if="wxSet.if_subscribe == 1">
				<view class="down-view-all content-card" v-if="wxSet.if_subscribe_popup != 1">
					<view class="">
						我们正式邀请您订阅成为我们的订阅嘉宾，一手最新消息
					</view>
					<view class="fr-btn down-subscribe-btn" @tap="showSubscribeMessage()">
						<i class="animation"></i>订阅最新内容<i class="animation"></i>
					</view>
				</view>
			</block>

			<!-- 激励视频下载附件样式 -->
			<block v-if="isShowDown == true">
				<view class="down-view-all content-card">
					<view class="down-user">
						<view class="down-user-img">
							<image class="fengrui-img" src="../../static/my/user.png" mode="aspectFill"></image>
						</view>
						<view class="down-user-name">
							Resource值
						</view>
					</view>
					<button class="down-btn-video" @tap="videoAD()">
						<view class="down-btn-video-icon">
							<image class="fengrui-img" src="../../static/data/ad_video.svg" mode=""></image>
						</view>
						获取附件（需观看 {{ ad_number }} 次广告）
					</button>
				</view>
			</block>


			<!-- 下载附件内容 -->
			<block v-else>
				<!-- 附件下载方式为复制链接 -->
				<block v-if="detailData.fr_down_style == '0' || detailData.fr_down_style == ''">
					<view class="down-view-all content-card" v-for="(item, index) in detailData.fr_down_url"
						:key="index">
						<view class="down-user">
							<view class="down-user-img">
								<image class="fengrui-img" src="../../static/my/user.png" mode="aspectFill"></image>
							</view>
							<view class="down-user-name">
								Resource值
							</view>
						</view>
						<view class="down-network-view">
							<text user-select="true">
								{{ item }}
							</text>
						</view>
						<view class="down-list-btn">
							<view class="down-btn-key" v-if="detailData.fr_down_key[index] != undefined && detailData.fr_down_key[index] !=''">提取码:<text
									user-select="true">{{ detailData.fr_down_key[index]
									}}</text></view>
						</view>
						<view class="down-list-btn-text">
							<span class="que-user-red">*</span>
							长按链接手动复制
						</view>
					</view>
				</block>

				<!-- 附件下载为直接下载方式 -->
				<block v-else>
					<view class="down-view-all content-card">
						<view class="down-user">
							<view class="down-user-img">
								<image class="fengrui-img" src="../../static/my/user.png" mode="aspectFill"></image>
							</view>
							<view class="down-user-name">
								ZIP包
							</view>
						</view>
						<view class="down-file">
							<block v-for="(item, index) in fileIcon" :key="index">
								<view class="down_file_icon">
									<image :src="item.img" class="fengrui-img" mode="aspectFit"></image>
								</view>
							</block>
						</view>
						<view class="down-file-txt" v-if="detailData.fr_down_format != ''">
							格 式：{{ detailData.fr_down_format }}
						</view>
						<button class="down-btn-video" @tap="downFile()" :loading="btnFile">
							{{ percentDown }}
						</button>
					</view>
				</block>

			</block>

			<!-- 判断微信流量主 -->
			<!-- #ifdef MP-WEIXIN -->
			<block v-if="wxSet.wx_video != ''">
				<view class="ad-container">
					<ad :unit-id="wxSet.wx_video" ad-type="video" ad-theme="white"></ad>
				</view>
			</block>

			<!-- 其他平台 -->
			<view class="down-view-all content-card">
				<view class="titel-h">
					其他平台
				</view>
				<view class="down-li-toew">
					<button class="down-icon-list-btn" @tap="wxvideoTap()" v-if="detailData.wxvideo_feedid != ''">
						<view class="down-icon-list-img">
							<image class="fengrui-img" src="../../static/data/wx_video_icon.svg" mode="aspectFit">
							</image>
						</view>
						<view class="down-icon-list-img-title">
							视频说明
						</view>
					</button>
					<button class="down-icon-list-btn" open-type="contact" :send-message-title="posdCenterTitle"
						:send-message-path="posUrl" show-message-card="true">
						<view class="down-icon-list-img">
							<image class="fengrui-img" src="../../static/my/customer.svg" mode="aspectFit">
							</image>
						</view>
						<view class="down-icon-list-img-title ma-top-0">
							客服
						</view>
					</button>

					<button class="down-icon-list-btn" open-type="share">
						<view class="down-icon-list-img">
							<image class="fengrui-img" src="../../static/data/share.svg" mode="aspectFit">
							</image>
						</view>
						<view class="down-icon-list-img-title ma-top-0">分享</view>
					</button>
				</view>
			</view>
			<!-- #endif -->

			<view class="" style="margin: 38rpx;">
				<view class="titel-h">
					声明：
				</view>
				<view class="data-clerk-text-w" style="margin: 38rpx 12rpx;">
					尊重各网络文件的版权问题，部分软件文件均出自网络，提供下载的软件和资源均为软件或程序作者提供和网友推荐收集整理而来，仅供学习和研究使用。如有侵犯你的版权，请及时通知我们，将立即改正
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// 获取应用实例
	const app = getApp()
	import * as API from "../../utils/api";
	// 导入订阅消息工具类
	import SubscribeMessage from '@/utils/subscribeMessage';
	let rewardedVideoAd = null;
	export default {
		data() {
			return {
				// 文章ID
				posdCenterID: '',
				// 页面路径
				posUrl: '',
				// 基本配置
				wxSet: [],
				launchScene: 0, //微信小程序场景值
				// 文章详情
				detailData: [],
				// 是否显示内容
				isShowDown: true,
				// 直接下载附件
				fileIcon: [{
						img: '../../static/down/apk.svg'
					},
					{
						img: '../../static/down/Excel.svg'
					},
					{
						img: '../../static/down/PPT.svg'
					},
					{
						img: '../../static/down/Word.svg'
					},
					{
						img: '../../static/down/PDF.svg'
					},
					{
						img: '../../static/down/txt.svg'
					},
					{
						img: '../../static/down/zip.svg'
					}
				],
				percentDown: '点击下载附件',
				btnFile: false,
				coverBulr: true,
				imgUrls: [],

				// 密码访问
				protected: false,
				isError: 'suss',
				getPass: '',
				public_step: false,

				ad_number: 1, //广告次数

				// 消息订阅
				templateId: '',
				openID: '',
				statusMessage: '',
			}
		},
		// 分享好友配置
		onLoad(posID) {
			// 获取当前时间戳
			const now = new Date();
			const year = now.getFullYear();
			const month = now.getMonth() + 1; // 月份从 0 开始，需加 1
			const day = now.getDate();
			const postDaySum = year + month + day;
			this.postDaySum = postDaySum;

			// 接受数据
			this.posdCenterID = posID.id;

			//判断是否扫码打开
			if (posID.scene) {
				this.posdCenterID = posID.scene;
			}

			// 接受数据
			this.posUrl = 'pages/download/download?id=' + posID.id;

			if (app.globalData.wxSet == '') {
				//（解决异步）
				app.on('wxSet', this.changeToken.bind(this));
			} else {
				this.wxSet = app.globalData.wxSet;
				this.launchScene = app.globalData.launchScene; //微信小程序场景值
				// 文章数据
				this.posdData();
			}


			// 微信分享盆友圈
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})

			// 加载ing
			uni.showLoading({
				title: '加载中...'
			})
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.detailData.title.rendered,
				imageUrl: this.detailData.thumbnailurl,
				path: '/pages/download/download?id=' + this.posdCenterID
			}
		},
		// 文章分享盆友圈 目前支持安卓
		onShareTimeline(res) {
			return {
				title: this.detailData.title.rendered,
				imageUrl: that.detailData.thumbnailurl,
				path: '/pages/download/download?id=' + this.posdCenterID
			}

		},

		methods: {
			//（解决异步）
			changeToken() {
				this.wxSet = app.globalData.wxSet;
				this.launchScene = app.globalData.launchScene; //微信小程序场景值
				// 文章数据
				this.posdData();

			},

			// 文章数据
			posdData() {
				API.getInfo([this.posdCenterID]).then((res) => {
					this.detailData = res.data;
					this.imgUrls = this.extractImages(res.data.content.rendered);
					// 获取 ad_number，若为空则设为 1
					this.ad_number = res.data.ad_number || 1;
					this.protected = res.data.content.protected; // 密码访问
					this.coverBulr = false;
					if (this.wxSet.public_step != "") { // 判断教程
						this.public_step = true;
					}
					if (this.protected == false) { // 广告缓存判断
						this.infoAdJudge();
					}
					this.infoPassJudge(); // 密码缓存判断
				});
			},

			// 密码访问
			emitPass(pass) {
				API.getInfoPass(this.posdCenterID, pass).then((res) => {
					// console.log('文章密码详情', res.statusCode)
					if (res.statusCode != 200) {
						this.isError = 'err';
					} else {
						this.setPass(pass); //密码缓存
						this.detailData = res.data;
						this.protected = false; //密码访问
						this.imgUrls = this.extractImages(res.data.content.rendered);
						this.infoAdJudge(); // 广告缓存判断
					}
				})
			},

			// 从HTML内容中提取图片URL
			extractImages(html) {
				const imgRegex = /<img.*?src="([^"]*)".*?>/g;
				const imgUrls = [];
				let match;
				while ((match = imgRegex.exec(html)) !== null) {
					imgUrls.push(match[1]);
				}
				return imgUrls;
			},

			// 广告缓存判断
			infoAdJudge() {
				// 获取激励视频缓存
				const postAdKey = uni.getStorageSync('url_adkey');
				uni.hideLoading();
				if (this.wxSet.ad_time == '1') {
					if (postAdKey) { // 查找缓存数据
						const foundItem = postAdKey.find(item => item.id === this.posdCenterID)
						// console.log(foundItem, '查找缓存数据')
						if (foundItem) {
							if (foundItem.time != this.postDaySum) { // 缓存时间大于或不等于
								this.starpAd();
							} else {
								this.isShowDown = false;
							}
						} else {
							this.starpAd(); // 没有缓存 初始化广告
						}
					} else {
						this.starpAd(); // 没有缓存 初始化广告
					}
				} else {
					this.starpAd(); // 没有缓存 初始化广告
				}

				// 独立文章公告弹窗
				if (this.detailData.pos_notice != '') {
					uni.showModal({
						title: '公告',
						content: this.detailData.pos_notice,
					});
				}
			},

			// 密码缓存判断
			infoPassJudge() {
				// 获取激励视频缓存
				const passKey = uni.getStorageSync('pass_adkey');
				// 查找缓存数据
				if (passKey) {
					const foundItem = passKey.find(item => item.id === this.posdCenterID)
					// console.log(foundItem,'查找缓存数据')
					if (foundItem) {
						if (foundItem.time == this.postDaySum) { // 缓存时间大于或等于
							// console.log(foundItem.pass,'缓存密码')
							this.getPass = foundItem.pass;
						}
					}
				}
			},

			// 初始化广告
			starpAd() {
				if (this.wxSet.if_subscribe == 1) { // 判断是否开启订阅消息
					API.getSubscribeTemplate().then((res) => {
						this.templateId = res.data.template_id;
						if (this.wxSet.if_subscribe_popup == 1) {
							setTimeout(() => {
								this.showSubscribeMessage();
							}, 1500);
						}
					})
				}
				
				if (this.wxSet.wx_jili_video != '' && this.detailData.if_rec_down_video == '1') {
					this.CreateAd();
				} else {
					this.isShowDown = false;
				}
			},

			//初始化激励视频广告组件
			CreateAd() {
				if (this.wxSet.wx_jili_video != "") {
					if (wx.createRewardedVideoAd) {
						this.videoAd = wx.createRewardedVideoAd({
							adUnitId: this.wxSet.wx_jili_video,
						});
						this.videoAd.onLoad(() => {});
						this.videoAd.onError((err) => {
							// console.log(err)
							// 播放错误下发奖励
							this.isShowDown = false;
							
							if (this.wxSet.if_subscribe_popup == 1 && this.wxSet.if_subscribe == 1) {
								setTimeout(() => {
									this.showSubscribeMessage();
								}, 1500);
							}
						});
						this.videoAd.onClose((res) => {
							if (res && res.isEnded) {
								uni.showToast({
									icon: "none",
									title: "感谢您的支持",
								});
								// 观看广告后减少次数
								this.ad_number--;
								if (this.ad_number <= 0) {
									this.isShowDown = false;
									// 设置广告缓存
									if (this.wxSet.ad_time == "1") {
										this.setRead();
									}
								}
								if (this.wxSet.if_subscribe_popup == 1 && this.wxSet.if_subscribe == 1) {
									setTimeout(() => {
										this.showSubscribeMessage();
									}, 1500);
								}
							} else {
								uni.showToast({
									icon: "none",
									title: "中途关闭广告",
								});
							}
						});
					}
				}
			},

			// 流量主视频弹窗
			videoAD() {
				if (this.launchScene == 1154) {
					uni.showToast({
						title: '请前往小程序使用完整服务',
						icon: "none"
					})
					return;
				}
				this.getVideoAd();
			},

			// 激励视频
			getVideoAd() {
				// 用户触发广告后，显示激励视频广告
				if (this.videoAd) {
					this.videoAd.show().catch(() => {
						// 失败重试
						this.videoAd.load()
							.then(() => this.videoAd.show())
							.catch(err => {
								console.log('激励视频', err)
								// this.isShowDown = false;
							})
					})
				}
			},

			// 视频号点击
			wxvideoTap() {
				uni.openChannelsActivity({
					finderUserName: this.detailData.wxvideo_id,
					feedId: this.detailData.wxvideo_feedid,
				})
			},
			// 设置广告缓存
			setRead() {
				var urlAdKey = uni.getStorageSync('url_adkey');
				if (urlAdKey == '') {
					var urlAdKey = [];
				}

				// 检测事否存在ID
				var isItem = urlAdKey.find(item => item.id === this.posdCenterID);
				// 如果有更新ID,若没有新增ID
				if (isItem) {
					const updateData = (id, newData) => {
						urlAdKey = urlAdKey.map(item => {
							if (item.id === id) {
								return {
									...item,
									...newData
								};
							}
							return item;
						});
					};
					updateData(this.posdCenterID, {
						time: this.postDaySum,
					});
				} else {
					var jlis = urlAdKey.unshift({
						id: this.posdCenterID,
						time: this.postDaySum,
					})
				}
				uni.setStorageSync('url_adkey', urlAdKey);
				// console.log(urlAdKey)
			},

			// 设置密码缓存
			setPass(e) {
				var passKey = uni.getStorageSync('pass_adkey');
				if (passKey == '') {
					var passKey = [];
				}

				// 检测事否存在ID
				var isItem = passKey.find(item => item.id === this.posdCenterID);
				// 如果有更新ID,若没有新增ID
				if (isItem) {
					const updateData = (id, newData) => {
						passKey = passKey.map(item => {
							if (item.id === id) {
								return {
									...item,
									...newData
								};
							}
							return item;
						});
					};
					updateData(this.posdCenterID, {
						time: this.postDaySum,
					});
				} else {
					var jlis = passKey.unshift({
						id: this.posdCenterID,
						time: this.postDaySum,
						pass: e,
					})
				}
				uni.setStorageSync('pass_adkey', passKey);
				// console.log(passKey)
			},

			// 左上角返回按钮
			tarBlack: function() {
				// 建立页面栈 如果是1则是分享打开需要返回主页，大于1则返回上一级
				var selPage = getCurrentPages();
				// console.log(selPage.length)
				if (selPage.length == 1) {
					uni.switchTab({
						url: "../index/index"
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},

			// 点击下载附件
			downFile() {
				this.percentDown = '下载中';
				this.btnFile = true;
				// console.log(that.detailData.fr_down_title + '.' + that.detailData.fr_down_format)
				uni.downloadFile({
					url: this.detailData.fr_down_file,
					success: (res) => {
						// console.log(res)
						if (res.statusCode == 200) {
							this.percentDown = '附件下载完成';
							this.btnFile = false;
							uni.showModal({
								title: '下载成功',
								content: '文件以下载完成仅保存一次，请使用转发功能发送到文件管理/我的电脑',
								success: (frs) => {
									if (frs.confirm) {
										uni.shareFileMessage({
											filePath: res.tempFilePath,
											fileName: this.detailData.fr_down_title + '.' +
												this.detailData.fr_down_format,
											success(data) {
												// console.log('转发ok')
											},
										})
									}
								}
							});
						} else {
							this.btnFile = false;
							this.percentDown = '附件下载失败';
							uni.showModal({
								title: '错误403',
								content: '附件下载失败',
								success: (frs) => {

								}
							})
						}
					},
				});
			},

			// 预览图片
			imgsTap(d) {
				uni.previewImage({
					urls: this.imgUrls,
					current: d,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
					}
				});
			},

			// 弹窗订阅
			showSubscribeMessage() {
				SubscribeMessage.showSubscribeMessage(this.templateId, () => {
					// 订阅成功后的回调处理
					this.statusMessage = '订阅成功！';
				});
			},
		}
	}
</script>

<style>
	@keyframes subscribe {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.cover-quest-subscribe {
		animation: subscribe 1.2s ease infinite;
		background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%) !important;
		color: #ffffff !important;
	}

	/* 关注微信公众号 */
	.que-user-red {
		color: #ff4d4f;
		font-weight: bold;
	}

	.account-aout {
		margin-left: 30rpx;
	}

	.account-btn {
		height: 60rpx;
		background-color: #1c262a;
		border-radius: 200rpx;
		font-size: 24rpx;
		width: 150rpx;
		color: #FFFFFF;
		flex-shrink: 0;
		margin-right: 0rpx;
	}

	.account-describe {
		font-size: 20rpx;
		color: #7c7c7c;
	}

	.account-img {
		height: 80rpx;
		width: 80rpx;
		border-radius: 200rpx;
		overflow: hidden;
	}

	.account-flex {
		display: flex;
	}

	.account-view {
		background-color: #f9f9f9;
		border-radius: 40rpx;
		height: 120rpx;
		margin: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18rpx 30rpx;
	}

	/* 密码访问 */
	.password-title {
		margin: 20rpx 0;
		font-weight: bold;
		font-size: 36rpx;
		text-align: center;
	}

	.password-desrc {
		width: 70%;
		margin: auto;
		text-align: center;
		font-size: 28rpx;
		color: #929292;
	}

	.password-position {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 100%;
		transform: translate(-50%, -60%);
	}

	.password-icon {
		height: 500rpx;
		width: 100%;
		overflow: hidden;
	}

	/* 加载动画 */
	.data-login {
		height: 70rpx;
		width: 70rpx;
		margin: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.data-login-flex {
		position: fixed;
		top: 0%;
		left: 0%;
		height: 100%;
		width: 100%;
		z-index: 1030;
		background-color: #f7f7f7;
	}

	/* 壁纸预览相关样式 */
	.wallpaper-preview-container {
		position: relative;
		margin-bottom: 40rpx;
	}

	.wallpaper-showcase {
		width: 100%;
		height: 500rpx;
		border-radius: 24rpx;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
		/* box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15); */
		background-color: #FFFFFF;
		margin: 0 38rpx;
		width: calc(100% - 76rpx);
	}

	.wallpaper-preview-img {
		width: 100%;
		height: 100%;
		transition: transform 0.6s;
	}

	.wallpaper-preview-img:active {
		transform: scale(1.05);
	}

	.wallpaper-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.wallpaper-info {
		color: #fff;
	}

	.wallpaper-category {
		font-size: 28rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	}

	.down-view-ruan {
		color: #4b75ff;
		margin-right: 14rpx;
		flex-shrink: 0;
		font-size: 36rpx;
	}

	.down-view-title {
		display: flex;
		font-weight: 600;
		align-items: center;
	}

	.down-view-title-dscr {
		padding: 14rpx 36rpx 30rpx 46rpx;
		color: #8c8c8c;
		font-size: 26rpx;
		line-height: 1.5;
	}

	.down-icon-list-btn {
		text-align: center;
		margin: 0;
		background-color: unset;
		padding: 0;
		transition: all 0.3s;
	}

	.down-icon-list-btn:active {
		transform: scale(0.95);
	}

	.down-li-toew {
		display: flex;
		margin-top: 40rpx;
		align-items: center;
		border-radius: 40rpx;
		justify-content: space-around;
	}

	.down-icon-list {
		text-align: center;
	}

	.down-icon-list-img {
		height: 70rpx;
		width: 70rpx;
		overflow: hidden;
		margin: auto;
	}

	.down-icon-list-img-title {
		font-size: 24rpx;
		color: #8c8c8c;
		margin-top: 16rpx;
	}

	.down-li-toew-ma {
		margin: 40rpx 0rpx 20rpx 0rpx;
	}

	/* 说明 */
	.list-btn {
		height: 50rpx;
		width: 160rpx;
		background-color: #007AFF;
		border-radius: 100rpx;
		text-align: center;
		color: #FFFFFF;
		line-height: 50rpx;
		bottom: 0rpx;
		position: absolute;
		right: 0;
	}

	/* 列表 */
	.list-li-left-describe {
		color: #D5D5D5;
		font-size: 26rpx;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
	}

	.list-li-tag {
		color: #0BBDA6;
		font-size: 20rpx;
	}

	.list-li-left-h {
		font-size: 36rpx;
	}

	.list-li-left {
		margin-left: 32rpx;
		flex-grow: 1;
		height: 120rpx;
		position: relative;
	}

	.list-img {
		height: 120rpx;
		width: 140rpx;
		border-radius: 14rpx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.list-li {
		display: flex;
		margin-top: 60rpx;
		align-items: center;
		background-color: #fff;
		/* padding: 24rpx; */
		border-radius: 40rpx;
	}

	/* 百度网盘下载 */
	.down-btn {
		background-color: #007AFF !important;
		color: #FFFFFF !important;
		border-radius: 100rpx !important;
		width: 100%;
		margin: 0rpx 10rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		height: 80rpx;
		transition: background-color 0.3s;
		box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
	}

	.down-btn:active {
		background-color: #0056b3 !important;
	}

	.down-btn-video {
		background: linear-gradient(135deg, #1890ff, #0056b3) !important;
		color: #FFFFFF !important;
		border-radius: 100rpx !important;
		width: 80%;
		margin: auto;
		font-size: 28rpx;
		line-height: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
		box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.25);
		transition: all 0.3s;
	}

	.down-btn-video:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.25);
	}

	.down-btn-video-icon {
		height: 46rpx;
		width: 56rpx;
		margin-top: -6rpx;
		margin-right: 8rpx;
	}

	.down-btn-key {
		background-color: #000000 !important;
		color: #FFFFFF !important;
		border-radius: 100rpx !important;
		width: 100%;
		margin: 0rpx 10rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		height: 80rpx;
		text-align: center;
		box-shadow: 0 4rpx 12rpx rgba(35, 193, 170, 0.3);
	}

	.down-list-btn-text {
		font-size: 22rpx;
		color: #8c8c8c;
		margin-top: 16rpx;
		/* text-align: center; */
	}

	.down-list-btn {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		margin-top: 22rpx;
		overflow: hidden;
	}

	.down-network-icon {
		width: 150rpx;
		background-color: #EFEFEF;
		border-radius: 10rpx;
		height: 130rpx;
		margin-left: 20rpx;
		overflow: hidden;
		flex-shrink: 0;
		line-height: 130rpx;
		margin: auto;
	}

	.down-network-view {
		padding: 30rpx;
		background-color: #f5f5f5;
		border-radius: 16rpx;
		color: #595959;
		font-size: 26rpx;
		word-break: break-all;
		line-height: 1.5;
		margin: 20rpx 0;
	}

	.down-user-name {
		margin-left: 20rpx;
		font-size: 32rpx;
		font-weight: 500;
	}

	.down-user-img {
		height: 70rpx;
		width: 70rpx;
		overflow: hidden;
		border-radius: 200rpx;
		border: 2rpx solid #f0f0f0;
	}

	.down-user {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		justify-content: flex-start;
		overflow: hidden;
	}

	.down-file {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 70rpx 0;
	}

	.down_file_icon {
		height: 44rpx;
		width: 44rpx;
		opacity: 0.7;
		overflow: hidden;
		transition: all 0.3s;
	}

	.down_file_icon:hover {
		opacity: 1;
		transform: scale(1.1);
	}

	.down_file_icon_index {
		height: 80rpx;
		width: 80rpx;
		opacity: 1;
		overflow: hidden;
	}

	.down-file-txt {
		margin: 14rpx 0;
		font-size: 28rpx;
		color: #8c8c8c;
		text-align: center;
	}

	.self-user-updata {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 76rpx;
	}

	/* 顶部图片 */
	.data-clerk-text-w {
		font-size: 24rpx;
		color: #8c8c8c;
		line-height: 1.6;
	}

	.data-clerk-text-h {
		font-size: 44rpx;
		margin-bottom: 20rpx;
		font-weight: 600;
		color: #333333;
	}

	.data-clerk-text {
		width: 360rpx;
		position: absolute;
		top: 80rpx;
		left: 40rpx;
	}

	.data-clerk {
		width: 100%;
		height: 300rpx;
		position: relative;
		margin-bottom: 20rpx;
	}

	.data-img {
		height: 320rpx;
		width: 360rpx;
		overflow: hidden;
		position: absolute;
		bottom: 0rpx;
		right: 0rpx;
		opacity: 0.9;
	}

	/* 全局 */
	.down-subscribe-btn {
		width: 100%;
		margin-top: 28rpx;
	}

	.titel-h {
		font-size: 32rpx;
		position: relative;
		margin-bottom: 20rpx;
		font-weight: 600;
		color: #333333;
		padding-left: 16rpx;
	}

	.down-view-all {
		background-color: #FFFFFF;
		border-radius: 40rpx;
		padding: 38rpx;
		margin: 38rpx;
	}

	.content-card {
		transition: all 0.3s;
	}

	.content-card:active {
		transform: scale(0.99);
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}

	page {
		background-color: #F7F7F7;
	}

	.centem-body {
		padding-bottom: 50rpx;
	}

	button:after {
		border: 0px solid rgba(0, 0, 0, .2);
	}

	.ad-container {
		margin: 30rpx;
		border-radius: 40rpx;
		overflow: hidden;
	}

	/* 暗黑模式下应用的样式 */
	@media (prefers-color-scheme: dark) {

		page,
		.data-login-flex {
			background: #161616;
		}

		.down-view-all,
		.account-view,
		.list-li,
		.disclaimer-section {
			background-color: #202020;
		}

		.down-network-view {
			background-color: #2c2c2c;
			color: #a6a6a6;
		}

		.account-btn,
		.down-network-icon {
			background-color: #303030;
		}

		.titel-h,
		.data-clerk-text-h,
		.down-user-name {
			color: #e6e6e6;
		}

		.down-view-title-dscr,
		.data-clerk-text-w,
		.down-list-btn-text,
		.down-icon-list-img-title,
		.down-file-txt {
			color: #a6a6a6;
		}

		.wallpaper-overlay {
			background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
		}
	}
</style>